<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true     
    }
    // chartData: {
    //   type: Object,
    //   required: true   // 必须要传入的参数
    // }
  },
  data() {
    return {
      chart: null,
      // 这是Y轴展示数据
      newVisitis: {
        expectedData: [100, 120, 161, 134, 105, 160, 165],
        actualData: [120, 82, 91, 154, 162, 140, 145],
        newData: [111, 222, 333, 444, 666, 777, 888]
      },
      // 这是X轴展示数据
      xData:['周1','周2','周3','周4','周5','周6','周7'],
      // Y轴的max值
      maxNum:2800,
      // chartTitle
      chartTitle:['出库','入库','异常'],



      /**
       * chart渲染固定参数
       */
      option:{
        xAxis: {
          data:[] ,  // 动态数据
          boundaryGap: false,
          axisTick: {
            show: false
          }
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        yAxis: {
          axisTick: {
            show: false
          }
        },
        legend: {
          data: []
        },
        series: [
          // 第一条线
          {
          name: '', 
          itemStyle: {
            normal: {
              color: '#FF005A',
              lineStyle: {
                color: '#FF005A',
                width: 2
              }
            }
          },
          smooth: true,
          type: 'line',
          data: [],
          animationDuration: '',
          animationEasing: 'cubicInOut'
        },
        // 第二条线
        {
          name: '',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#3888fa',
              lineStyle: {
                color: '#3888fa',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: [],         // 是个数组类型的数据  与X轴数据一一对应
          animationDuration: '',    // 最高阈值
          animationEasing: 'quadraticOut'
        },
        // 第三条线
        {
          name: '',
          smooth: true,
          type: 'line',
          itemStyle: {
            normal: {
              color: '#FWFWFW',
              lineStyle: {
                color: '#FWFWFW',
                width: 2
              },
              areaStyle: {
                color: '#f3f8ff'
              }
            }
          },
          data: [],         // 是个数组类型的数据  与X轴数据一一对应
          animationDuration: '',    // 最高阈值
          animationEasing: 'quadraticOut'
        }
        ]
      
      },
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')  // 初始化画布  
      // 掉后端请求 返回res
      // 最大值是所有数组遍历后最大值 +100
      this.setOptions()
    },
    setOptions(){
      // 设置X轴
      this.option.xAxis.data=this.xData
      // 设置两条线的名称
      this.option.legend.data=this.chartTitle
      // 第一条线数据填充
      this.option.series[0].data=this.newVisitis.expectedData
      this.option.series[0].animationDuration= this.maxNum
      this.option.series[0].name= this.chartTitle[0]
      
      // 第二条线数据填充
      this.option.series[1].data=this.newVisitis.actualData
      this.option.series[1].animationDuration= this.maxNum
      this.option.series[1].name= this.chartTitle[1]

       // 第三条线数据填充
      this.option.series[2].data=this.newVisitis.newData
      this.option.series[2].animationDuration= this.maxNum
      this.option.series[2].name= this.chartTitle[2]



      // 最重要的一步  图标生成
      this.chart.setOption(this.option)
    }
  }
}
</script>
